<!-- 护理项目列表页 -->
<template>
  <div class="min-h serveProject bg-wt">
     <div class="baseList">
       <div class="tableBoxs">
        <div class="newBox">
            <button class="bt wt-120" @click="handleBulid()">
                新增护理项目
            </button>
        </div>

         <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
         <t-table
               row-key="index"
               :data="data"
               :columns="COLUMNS"
               :hover="true"
               vertical-align="middle"
               cell-empty-content="-"
               resizable
               lazy-load
               @row-click="handleRowClick"
           >
                 <!-- 序号 -->
           <template #index="{ rowIndex }">
                 {{ rowIndex + 1 }}
           </template>
                 <!-- 自定义图片列 -->
            <template #image="{ row }">
                   <div class="tdesign-demo-image-viewer__base">
                   <t-image-viewer :images="[row.image]">
                      <template #trigger="{ open }">
                          <div class="tdesign-demo-image-viewer__ui-image">
                          <img alt="test" :src="row.image"  class="tdesign-demo-image-viewer__ui-image--img"/>
                           <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open" >
                         <span><BrowseIcon size="1.4em" /> 预览</span> </div></div>
                         </template>
                      </t-image-viewer>
                       </div>
             </template>
   
                 <!-- 自定义操作列 -->
                 <template #operator="{ row }">
          <div class="operateCon">
            <a
              class="btn-dl"
              :class="row.count ? 'disabled' : ''"
              @click="handleClickDelete(row)"
              >删除</a
            >
            <a
              class="font-bt"
              :class="row.count ? 'disabled' : ''"
              @click="handleEdit(row)"
              >编辑</a
            >
            <a
              class="delete"
              :class="
                row.count && row.status === 1
                  ? 'disabled btn-dl'
                  : row.status === 1
                  ? 'btn-dl'
                  : 'font-bt'
              "
              @click="handleForbidden(row)"
              >{{ row.status === 1 ? '禁用' : '启用' }}</a
            >
          </div>
        </template>
                 <!-- 价格处理 -->
                   <!-- 价格拼接 -->
             <template #price="{ row }">
                     {{ isDecimals(row.price) ? row.price : row.price + '.00' }}
             </template>
         </t-table>
         <!-- 分页 -->
         <t-pagination
               v-if="pagination.pageSize <= pagination.total"
               v-model="pagination.pageNum"
               v-model:pageSize="pagination.pageSize"
               :total="pagination.total"
               @change="onChange"
         />
       </div>
     </div>
 </div>
</template> 

<script lang="tsx" setup>
import {COLUMNS} from "@/pages/serve/plan/project/constants.ts";
import {  PaginationProps } from 'tdesign-vue-next';
import { ref, watch } from "vue";


interface FontSetting {
  id: number;
  font: boolean;
}
const fontSettingss = ref<FontSetting[]>([]);
// 禁用
const handleForbidden = (val) => {
  if (!val.count) {
    emit('handleForbidden', val)
  }
}
// 点击删除
const handleClickDelete = (val) => {
  fontSettingss.value.forEach(item => {
    if (item.id === val.id) {
      val.font = !item.font
    }
  })
  if (!val.count) {
    emit('handleClickDelete', val)
  }
}
//新增按钮
const handleBulid = () =>{
  emit('handleBulid')
}

//定义props 接收父组件传过来的参数
const props=defineProps({
  data:{
    type:Array,
    default:[]
  },
  pagination:{
    type:Object,
    default:{}
  }
}
)

const emit= defineEmits(['onChange','handleBulid','handleEdit','handleClickDelete','handleForbidden'])
// 当前页和每页大小发生变化时触发
const onChange: PaginationProps['onChange'] = (pageInfo) => {
  //pageInfo传给父组件
  emit('onChange',pageInfo)
};
//自动生成小数
const isDecimals = (val:number) => {
if (String(val).indexOf('.') > -1) {
     return true
   }
   return false
};
//编辑   参数为一行数据
const handleEdit = (row) =>{
  emit('handleEdit', row)
}
</script>
<style lang="less" scoped>
.disabled {
  color: #757575; /* 灰色，表示禁用 */
  cursor: not-allowed; /* 更改鼠标光标为不可点击状态 */
  pointer-events: none; /* 阻止所有鼠标事件，确保点击不会触发 */
}
</style>

